import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import Home1 from "../images/tabbar/home_1.png"
import Home2 from "../images/tabbar/home_2.png"
import My_1 from "../images/tabbar/my_1.png"
import My_2 from "../images/tabbar/my_2.png"
import Fast from "../images/tabbar/fast.png"
import "./css/Nav.css"


const useStyles = makeStyles({
  root: {
    width: "100%",
    position: "fixed",
    left: 0,
    bottom: 0,
  },
});

export default function Nav(props) {
  // console.log(props);
  const classes = useStyles();

  let initVal = 0;
  let pathname = props.history.location.pathname
  switch (pathname) {
    case "/home":
      initVal = 0
      break;
    case "/fast":
      initVal = 1
      break;
    case "/user":
      initVal = 2
      break;
    default:
      initVal = 0
      break;
  }
  // 根据路由地址决定value的初始值
  const [value, setValue] = React.useState(initVal);
  
  return (
    <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
        switch (newValue) {
          case 0:
            // 跳转首页
            props.history.push("/home")
            break;
          case 1:
            // 跳转快速刷题
            props.history.push("/fast")
            break;
          case 2:
            // 跳转我的
            props.history.push("/user")
            break;
          default:
            break;
        }
      }}
      showLabels
      className={classes.root}
      style={{display: pathname=="/home" || pathname==="/fast" || pathname==="/user"?"flex":"none"}}
    >
      <BottomNavigationAction label="首页" icon={<img className="home_icon" src={value === 0?Home1:Home2} />} />
      <BottomNavigationAction label="快速刷题" icon={<img className="fast_icon" src={Fast} />} />
      <BottomNavigationAction label="我的" icon={<img className="my_icon" src={value===2?My_1:My_2} />} />
    </BottomNavigation>
  );
}
